<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="style.css" rel="stylesheet" type="text/css">
    <title>Ace Bookmarklet Builder</title>
</head>
<body>
<div id="wrapper">
    <div class="content" style="width: 950px">
        <div class="column1" style="margin-top: 47px">
            <textarea id="textarea" style="width:800px; height:500px">
            </textarea>
        </div>
    </div>

    <script>

        function inject(options, callback) {
            var baseUrl = options.baseUrl || "../../src-noconflict";

            var load = function(path, callback) {
                var head = document.getElementsByTagName('head')[0];
                var s = document.createElement('script');

                s.src = baseUrl + "/" + path;
                head.appendChild(s);

                s.onload = s.onreadystatechange = function(_, isAbort) {
                    if (isAbort || !s.readyState || s.readyState === "loaded" || s.readyState === "complete") {
                        s = s.onload = s.onreadystatechange = null;
                        if (!isAbort)
                            callback();
                    }
                };
            };

            load("../src/ace.js", function() {
                ace.config.loadModule("../src", function() {
                    var event = ace.require("ace/lib/event");
                    var areas = document.getElementsByTagName("textarea");
                    for (var i = 0; i < areas.length; i++) {
                        event.addListener(areas[i], "click", function(e) {
                            if (e.detail === 3) {
                                ace.transformTextarea(e.target, options.ace);
                            }
                        });
                    }
                    callback && callback();
                });
            });
        }

        // Call the inject function to load the ace files.
        var textAce;
        inject({}, function () {
            // Transform the textarea on the page into an ace editor.
            var t = document.querySelector("textarea");
            textAce = ace.require("ace/ext/textarea").transformTextarea(t);
            setTimeout(function(){textAce.setDisplaySettings(false)});
        });

    </script>
</div>
</body>
</html>